React Server Actions: Põhjalik Juhend Vormide Töötlemiseks ja Serveri Integratsiooniks

            // app/actions.js
'use server'

import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Simuleeri andmebaasi sisestust
  await new Promise((resolve) => setTimeout(resolve, 1000))

  console.log('Post created:', { title, content })

  // Valideeri uuesti blogi marsruut
  revalidatePath('/blog')

  return { message: 'Postitus on edukalt loodud!' }
}

            

              
                Copy
              
            
          

            // app/components/PostForm.js
import { createPost } from '../actions'
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    
      {pending ? 'Loon...' : 'Loo postitus'}
    
  )
}

export default function PostForm() {
  return (
    

      Pealkiri:
      

      Sisu:
      
      <SubmitButton />
    </form>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKaW1wb3J0IHsgY3JlYXRlUG9zdCB9IGZyb20gJy4uL2FjdGlvbnMnCid1c2UgY2xpZW50JwoKaW1wb3J0IHsgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbScKCmZ1bmN0aW9uIFN1Ym1pdEJ1dHRvbigpIHsKICBjb25zdCB7IHBlbmRpbmcgfSA9IHVzZUZvcm1TdGF0dXMoKQoKICByZXR1cm4gKAogICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAge3BlbmRpbmcgPyAnTG9vbi4uLicgOiAnTG9vIHBvc3RpdHVzJ30KICAgIDwvYnV0dG9uPgogICkKfQoKZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUG9zdEZvcm0oKSB7CiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17Y3JlYXRlUG9zdH0+CiAgICAgIDxsYWJlbCBodG1sRm9yPSJ0aXRsZSI+UGVhbGtpcmk6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJ0aXRsZSIgbmFtZT0idGl0bGUiIHJlcXVpcmVkIC8+CgogICAgICA8bGFiZWwgaHRtbEZvcj0iY29udGVudCI+U2lzdTo8L2xhYmVsPgogICAgICA8dGV4dGFyZWEgaWQ9ImNvbnRlbnQiIG5hbWU9ImNvbnRlbnQiIHJlcXVpcmVkIC8+CgogICAgICA8U3VibWl0QnV0dG9uIC8+CiAgICA8L2Zvcm0+CiAgKQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Selles näites:</p>

<ul>
  <li>Toiming <code>createPost</code> imporditakse failist <code>../actions</code>.</li>
  <li>Elemendi <code><form></code> atribuut <code>action</code> on seatud funktsioonile <code>createPost</code>.</li>
  <li>Komponent <code>SubmitButton</code> kasutab <code>useFormStatus</code> hook'i, et teha kindlaks, kas vormi hetkel esitatakse. See keelab nupu vormi esitamise ajaks, et vältida mitmekordseid esitamisi.</li>
</ul>

<h3>Vormiandmete käsitlemine</h3>

<p>Server Actions saavad vormiandmed automaatselt <code>FormData</code> objektina. Andmetele pääsete juurde, kasutades <code>FormData</code> objekti meetodit <code>get</code>. Siin on näide:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // ...
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIGNvbnN0IHRpdGxlID0gZm9ybURhdGEuZ2V0KCd0aXRsZScpCiAgY29uc3QgY29udGVudCA9IGZvcm1EYXRhLmdldCgnY29udGVudCcpCgogIC8vIC4uLgp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Selles näites eraldatakse <code>title</code> ja <code>content</code> <code>formData</code> objektist meetodi <code>get</code> abil.</p>

<h3>Kasutajale tagasiside andmine</h3>

<p>Saate kasutajale tagasisidet anda, tagastades Server Action'ist väärtuse. See väärtus on kättesaadav komponendile, mis toimingu käivitas. Saate seda väärtust kasutada kasutajale edu- või veateadete kuvamiseks. Siin on näide:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  return { message: 'Postitus on edukalt loodud!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdGl0dXMgb24gZWR1a2FsdCBsb29kdWQhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)

  async function handleSubmit(formData) {
    const result = await createPost(formData)
    setMessage(result.message)
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCgogIGFzeW5jIGZ1bmN0aW9uIGhhbmRsZVN1Ym1pdChmb3JtRGF0YSkgewogICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgY3JlYXRlUG9zdChmb3JtRGF0YSkKICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgfQoKICByZXR1cm4gKAogICAgPGRpdj4KICAgICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICAgIHsvKiAuLi4gKi99CiAgICAgIDwvZm9ybT4KICAgICAge21lc3NhZ2UgJiYgPHA+e21lc3NhZ2V9PC9wPn0KICAgIDwvZGl2PgogICkKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Selles näites:</p>

<ul>
  <li>Toiming <code>createPost</code> tagastab objekti atribuudiga <code>message</code>.</li>
  <li>Komponent <code>PostForm</code> kasutab teate salvestamiseks <code>useState</code> hook'i.</li>
  <li>Funktsioon <code>handleSubmit</code> kutsub välja toimingu <code>createPost</code> ja seab teate oleku toimingu poolt tagastatud väärtusele.</li>
  <li>Teade kuvatakse kasutajale <code><p></code> elemendis.</li>
</ul>

<h3>Vigade käsitlemine</h3>

<p>Server Actions võivad visata vigu, mille Reacti käituskeskkond kinni püüab. Saate neid vigu oma komponentides käsitleda, kasutades <code>try...catch</code> plokki. Siin on näide:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/actions.js
'use server'

export async function createPost(formData) {
  // ...

  if (!title || title.length < 5) {
    throw new Error('Pealkiri peab olema vähemalt 5 tähemärki pikk.')
  }

  return { message: 'Postitus on edukalt loodud!' }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2FjdGlvbnMuanMKJ3VzZSBzZXJ2ZXInCgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gY3JlYXRlUG9zdChmb3JtRGF0YSkgewogIC8vIC4uLgoKICBpZiAoIXRpdGxlIHx8IHRpdGxlLmxlbmd0aCA8IDUpIHsKICAgIHRocm93IG5ldyBFcnJvcignUGVhbGtpcmkgcGVhYiBvbGVtYSB25GhlbWFsdCA1IHTkaGVt5HJraSBwaWtrLicpCiAgfQoKICByZXR1cm4geyBtZXNzYWdlOiAnUG9zdGl0dXMgb24gZWR1a2FsdCBsb29kdWQhJyB9Cn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/components/PostForm.js
'use client'

import { useState } from 'react'
import { createPost } from '../actions'

export default function PostForm() {
  const [message, setMessage] = useState(null)
  const [error, setError] = useState(null)

  async function handleSubmit(formData) {
    try {
      const result = await createPost(formData)
      setMessage(result.message)
      setError(null)
    } catch (e) {
      setError(e.message)
      setMessage(null)
    }
  }

  return (
    <div>
      <form action={handleSubmit}>
        {/* ... */}
      </form>
      {message && <p>{message}</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  )
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbXBvbmVudHMvUG9zdEZvcm0uanMKJ3VzZSBjbGllbnQnCgppbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JwppbXBvcnQgeyBjcmVhdGVQb3N0IH0gZnJvbSAnLi4vYWN0aW9ucycKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIFBvc3RGb3JtKCkgewogIGNvbnN0IFttZXNzYWdlLCBzZXRNZXNzYWdlXSA9IHVzZVN0YXRlKG51bGwpCiAgY29uc3QgW2Vycm9yLCBzZXRFcnJvcl0gPSB1c2VTdGF0ZShudWxsKQoKICBhc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAgIHRyeSB7CiAgICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGNyZWF0ZVBvc3QoZm9ybURhdGEpCiAgICAgIHNldE1lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIHNldEVycm9yKG51bGwpCiAgICB9IGNhdGNoIChlKSB7CiAgICAgIHNldEVycm9yKGUubWVzc2FnZSkKICAgICAgc2V0TWVzc2FnZShudWxsKQogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxkaXY+CiAgICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgICB7LyogLi4uICovfQogICAgICA8L2Zvcm0+CiAgICAgIHttZXNzYWdlICYmIDxwPnttZXNzYWdlfTwvcD59CiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+e2Vycm9yfTwvcD59CiAgICA8L2Rpdj4KICApCn0K"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Selles näites:</p>

<ul>
  <li>Toiming <code>createPost</code> viskab vea, kui pealkiri on lühem kui 5 tähemärki.</li>
  <li>Komponent <code>PostForm</code> kasutab <code>try...catch</code> plokki, et püüda kinni kõik vead, mille toiming <code>createPost</code> viskab.</li>
  <li>Kui viga püütakse kinni, kuvatakse veateade kasutajale punase tekstiga <code><p></code> elemendis.</li>
</ul>

<h2>React Server Actions'i kasutamise parimad praktikad</h2>

<p>Et tagada Server Actions'i tõhus kasutamine, arvestage järgmiste parimate praktikatega:</p>

<h3>Kasutage direktiivi <code>'use server'</code></h3>

<p>Lisage alati oma Server Action failide algusesse direktiiv <code>'use server'</code>. See direktiiv ütleb Reacti kompilaatorile, et failis olevad funktsioonid tuleks käivitada serveris. See on turvalisuse ja jõudluse seisukohalt ülioluline.</p>

<h3>Hoidke toimingud väikesed ja keskendunud</h3>

<p>Iga Server Action peaks täitma ühte, hästi määratletud ülesannet. See muudab teie toimingud lihtsamini mõistetavaks, testitavaks ja hooldatavaks. Vältige suurte, monoliitsete toimingute loomist, mis teevad mitut omavahel mitteseotud ülesannet.</p>

<h3>Valideerige andmed serveris</h3>

<p>Valideerige alati andmed serveris enne mis tahes toimingute tegemist. See kaitseb teie rakendust kehtetute või pahatahtlike andmete eest. Kasutage sobivaid valideerimistehnikaid, nagu andmetüübi valideerimine, pikkuse kontrollid ja regulaaravaldised. Serveripoolne valideerimine on turvalisem kui kliendipoolne valideerimine, millest saab mööda minna.</p>

<h3>Käsitlege vigu sujuvalt</h3>

<p>Käsitlege oma Server Actions'ites alati vigu sujuvalt. See hoiab ära teie rakenduse kokkujooksmise ja pakub paremat kasutajakogemust. Kasutage <code>try...catch</code> plokke, et püüda kinni kõik erandid, mis võivad tekkida, ja edastage kasutajale informatiivseid veateateid.</p>

<h3>Kasutage optimistlikke uuendusi</h3>

<p>Kasutage optimistlikke uuendusi, et parandada oma rakenduse tajutavat reageerimisvõimet. Värskendage kasutajaliidest kohe, et see peegeldaks toimingu oodatavat tulemust, isegi enne kui server on muudatuse kinnitanud. Kui serveripoolne toiming ebaõnnestub, saate kasutajaliidese hõlpsalt selle eelmisesse olekusse tagasi viia.</p>

<h3>Kaaluge vahemälu kasutamist</h3>

<p>Kaaluge Server Actions'i tulemuste vahemällu salvestamist jõudluse parandamiseks. See võib olla eriti kasulik toimingute puhul, mis teevad kulukaid operatsioone või mida sageli kutsutakse. Kasutage sobivaid vahemälustrateegiaid, nagu HTTP-vahemälu või serveripoolne vahemälu, et vähendada oma serveri koormust.</p>

<h3>Turvake oma Server Actions'id</h3>

<p>Rakendage turvameetmeid, et kaitsta oma Server Actions'eid volitamata juurdepääsu ja manipuleerimise eest. Kasutage autentimist ja autoriseerimist, et tagada, et ainult volitatud kasutajad saavad teatud toiminguid teha. Kaitske end levinud turvaaukude eest, nagu saidiülene skriptimine (XSS) ja SQL-i süstimine. Puhastage alati kasutaja sisend enne selle kasutamist andmebaasipäringutes või muudes tundlikes toimingutes.</p>

<h2>Levinud kasutusjuhud React Server Actions'ile</h2>

<p>Server Actions sobivad hästi mitmesugusteks kasutusjuhtudeks, sealhulgas:</p>

<h3>Vormide esitamine</h3>

<p>Vormide esitamise käsitlemine on üks levinumaid Server Actions'i kasutusjuhte. Saate kasutada Server Actions'eid vormiandmete töötlemiseks, sisendi valideerimiseks ja andmete salvestamiseks andmebaasi. See välistab vajaduse eraldi API lõpp-punktide järele ja lihtsustab teie arendusprotsessi. Näiteks kasutajate registreerimise, kontaktvormide või tooteülevaadete käsitlemine.</p>

<h3>Andmemuutused</h3>

<p>Server Actions'eid saab kasutada andmemuutuste tegemiseks, näiteks andmete loomiseks, uuendamiseks või kustutamiseks andmebaasis. See võimaldab teil värskendada oma rakenduse andmeid vastuseks kasutaja tegevustele. Näideteks on kasutajaprofiilide värskendamine, kommentaaride lisamine või postituste kustutamine.</p>

<h3>Autentimine ja autoriseerimine</h3>

<p>Server Actions'eid saab kasutada autentimise ja autoriseerimise käsitlemiseks. Saate kasutada Server Actions'eid kasutaja mandaatide kontrollimiseks, token'ite väljastamiseks ja tundlike ressursside kaitsmiseks. See tagab, et ainult volitatud kasutajad pääsevad ligi teie rakenduse teatud osadele. Näiteks sisse-/väljalogimise funktsioonide rakendamine, kasutajarollide haldamine või juurdepääsu autoriseerimine konkreetsetele funktsioonidele.</p>

<h3>Reaalajas uuendused</h3>

<p>Kuigi Server Actions ei ole oma olemuselt reaalajas, saab neid kombineerida teiste tehnoloogiatega, näiteks WebSocketsiga, et pakkuda teie rakendusele reaalajas uuendusi. Saate kasutada Server Actions'eid sündmuste käivitamiseks, mida seejärel edastatakse ühendatud klientidele WebSocketsi kaudu. Mõelge reaalajas vestlusrakendustele, koostöös dokumentide redigeerimisele või reaalajas armatuurlaudadele.</p>

<h2>Rahvusvahelistamise (i18n) kaalutlused</h2>

<p>Globaalsele publikule Server Actions'iga rakenduste arendamisel on rahvusvahelistamine (i18n) ülioluline. Siin on mõned olulised kaalutlused:</p>

<h3>Veateadete lokaliseerimine</h3>

<p>Veenduge, et Server Actions'i poolt tagastatud veateated oleksid lokaliseeritud kasutaja eelistatud keelde. See pakub paremat kasutajakogemust ja muudab kasutajatel probleemide mõistmise ja lahendamise lihtsamaks. Kasutage i18n-teeke tõlgete haldamiseks ja teadete dünaamiliseks kuvamiseks vastavalt kasutaja lokaadile.</p>

<h3>Kuupäeva ja numbri vormindamine</h3>

<p>Vormindage kuupäevad ja numbrid vastavalt kasutaja lokaadile. Erinevates lokaatides on erinevad tavad kuupäevade, numbrite ja valuutade kuvamiseks. Kasutage i18n-teeke nende väärtuste korrektseks vormindamiseks vastavalt kasutaja lokaadile.</p>

<h3>Ajavööndite käsitlemine</h3>

<p>Kuupäevade ja kellaaegadega tegelemisel olge teadlik ajavöönditest. Salvestage kuupäevad ja kellaajad UTC-vormingus ja teisendage need kuvamisel kasutaja kohalikku ajavööndisse. See tagab, et kuupäevad ja kellaajad kuvatakse korrektselt, sõltumata kasutaja asukohast. Näiteks sündmuste ajastamine või ajatemplite kuvamine.</p>

<h3>Valuuta konverteerimine</h3>

<p>Kui teie rakendus tegeleb valuutadega, pakkuge valuuta konverteerimise funktsionaalsust. Lubage kasutajatel vaadata hindu oma kohalikus valuutas. Kasutage usaldusväärset valuuta konverteerimise API-d, et tagada vahetuskursside ajakohasus. See on eriti oluline e-kaubanduse rakenduste ja finantsteenuste puhul.</p>

<h3>Paremalt vasakule (RTL) kirjutamise tugi</h3>

<p>Kui teie rakendus toetab keeli, mida kirjutatakse paremalt vasakule (RTL), nagu araabia või heebrea keel, veenduge, et teie kasutajaliides oleks nende keelte jaoks korralikult peegeldatud. See hõlmab paigutuse, teksti suuna ja ikoonide peegeldamist. Kasutage CSS-i loogilisi omadusi, et luua paigutusi, mis kohanduvad erinevate teksti suundadega.</p>

<h2>Näited React Server Actions'ist globaalsetes rakendustes</h2>

<p>Siin on mõned näited sellest, kuidas React Server Actions'eid saab kasutada globaalsetes rakendustes:</p>

<h3>E-kaubanduse platvorm</h3>

<ul>
  <li><b>Toote lisamine ostukorvi:</b> Server Action'it saab kasutada toote lisamiseks kasutaja ostukorvi. Toiming saab valideerida toote ID, kontrollida laoseisu ja uuendada ostukorvi andmebaasis.</li>
  <li><b>Tellimuse töötlemine:</b> Server Action'it saab kasutada tellimuse töötlemiseks. Toiming saab valideerida kasutaja makseteavet, arvutada saatmiskulud ja luua tellimuse andmebaasis.</li>
  <li><b>Uudiskirjaga liitumine:</b> Server Action saab käsitleda uudiskirjaga liitumisi, valideerides e-posti aadresse ja lisades need tellijate nimekirja.</li>
</ul>

<h3>Sotsiaalmeedia platvorm</h3>

<ul>
  <li><b>Kommentaari postitamine:</b> Server Action'it saab kasutada kommentaari postitamiseks postituse alla. Toiming saab valideerida kommentaari teksti, seostada selle postitusega ja salvestada selle andmebaasi.</li>
  <li><b>Postituse laikimine:</b> Server Action'it saab kasutada postituse laikimiseks. Toiming saab uuendada postituse laikide arvu ja salvestada laigi andmebaasi.</li>
  <li><b>Kasutaja jälgimine:</b> Server Actions saavad hallata jälgimistaotlusi, käsitleda kasutajate blokeerimist ja uuendada jälgijate arvu.</li>
</ul>

<h3>Reisibroneerimisrakendus</h3>

<ul>
  <li><b>Lendude otsimine:</b> Server Actions'eid saab kasutada lennu saadavuse päringuteks sihtkoha ja kuupäevade alusel. Toiming saab kutsuda väliseid API-sid, filtreerida tulemusi ja esitada kasutajale valikuid.</li>
  <li><b>Hotellitoa broneerimine:</b> Server Actions saavad käsitleda hotellibroneeringuid, kinnitades tubade saadavust ja töödeldes makseandmeid.</li>
  <li><b>Reisisihtkohtade arvustamine:</b> Server Action saab käsitleda kasutajate arvustuste ja hinnangute lisamist ja töötlemist.</li>
</ul>

<h2>React Server Components vs. Server Actions</h2>

<p>On oluline mõista erinevust React Server Components'i ja Server Actions'i vahel, kuna need töötavad sageli koos, kuid teenivad erinevaid eesmärke:</p>

<h3>React Server Components</h3>

<p>React Server Components on komponendid, mis renderdatakse serveris. Need võimaldavad teil pärida andmeid, teostada loogikat ja renderdada kasutajaliidese elemente serveris, mis võib parandada jõudlust ja vähendada kliendis allalaaditava ja käivitatava JavaScripti hulka. Server Components on peamiselt mõeldud kasutajaliidese renderdamiseks ja esialgsete andmete pärimiseks.</p>

<h3>Server Actions</h3>

<p>Server Actions on asünkroonsed funktsioonid, mis töötavad serveris vastusena kasutaja interaktsioonidele, näiteks vormide esitamistele. Need on peamiselt mõeldud andmemuutuste käsitlemiseks, serveripoolse loogika teostamiseks ja kasutajale tagasiside andmiseks. Server Actions'eid kutsutakse välja kliendi komponentidest, tavaliselt vastusena vormide esitamistele või muudele kasutaja sündmustele.</p>

<p><b>Peamised erinevused:</b></p>

<ul>
  <li><b>Eesmärk:</b> Server Components on kasutajaliidese renderdamiseks, samas kui Server Actions on andmemuutuste käsitlemiseks.</li>
  <li><b>Täitmine:</b> Server Components renderdatakse serveris esialgse lehe laadimise ajal, samas kui Server Actions'eid kutsutakse välja kliendi komponentidest vastusena kasutaja interaktsioonidele.</li>
  <li><b>Andmevoog:</b> Server Components saavad andmeid pärida otse serverist, samas kui Server Actions saavad andmeid kliendilt vormide esitamise või muude kasutaja sündmuste kaudu.</li>
</ul>

<p><b>Kuidas nad koos töötavad:</b></p>

<p>Server Components ja Server Actions'eid saab kasutada koos interaktiivsete veebirakenduste ehitamiseks. Server Components saavad renderdada esialgse kasutajaliidese ja pärida esialgsed andmed, samas kui Server Actions saavad käsitleda andmemuutusi ja anda kasutajale tagasisidet. Näiteks võiks Server Component renderdada vormi ja Server Action võiks käsitleda vormi esitamist ja uuendada andmeid andmebaasis.</p>

<h2>Kokkuvõte</h2>

<p>React Server Actions pakuvad võimsat ja tõhusat viisi vormide töötlemise, andmemuutuste ja muude serveripoolsete toimingute käsitlemiseks teie Reacti rakendustes. Kasutades Server Actions'eid, saate lihtsustada oma arendusprotsessi, parandada rakenduse jõudlust, suurendada turvalisust ja pakkuda paremat kasutajakogemust. Üha keerukamate veebirakenduste ehitamisel muutub React Server Actions'i mõistmine ja kasutamine kaasaegsete Reacti arendajate jaoks oluliseks oskuseks.</p>

<p>Ärge unustage järgida selles juhendis toodud parimaid praktikaid, et tagada Server Actions'i tõhus ja turvaline kasutamine. Server Actions'i omaksvõtmisega saate avada Reacti täieliku potentsiaali ja ehitada suure jõudlusega, kasutajasõbralikke veebirakendusi globaalsele publikule.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serveri komponendid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormide töötlemine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serveripoolne renderdamine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">andmemuutused</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React raamistik</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veebiarendus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">andmete pärimine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">serveri integratsioon</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiivne täiustamine</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>